<!-- 优惠卷管理 -->
<template>
  <div class="box">
    <el-form>
      <div class="form_box">
        <el-input v-model="name" clearable style="width: 200px;" placeholder="请输入优惠券标题" /><el-select v-model="type"
          clearable placeholder="请选择优惠券类型" style="width: 200px;"><el-option v-for="item in typeOptions"
            :key="item.value" :label="item.label" :value="item.value" /></el-select><el-select v-model="status"
          clearable placeholder="请选择优惠券状态" style="width: 200px;"><el-option v-for="item in stateOptions"
            :key="item.value" :label="item.label" :value="item.value" /></el-select><el-button type="primary"
          icon="el-icon-search" @click="find">查找</el-button><el-button type="primary" icon="el-icon-edit"
          @click="add">添加</el-button><el-button type="primary" icon="el-icon-download"
          @click="exportInformation">导出</el-button>
      </div>
    </el-form>
    <el-table :data="tableData" border>
      <el-table-column align="center" label="优惠券ID" prop="id" sortable />
      <el-table-column align="center" label="优惠券名称" prop="name" />
      <el-table-column align="center" label="介绍" prop="desc" />
      <el-table-column align="center" label="标签" prop="tag" />
      <el-table-column align="center" label="最低消费" prop="min">
        <template v-slot="scope">
          满{{ scope.row.min }}元可用
        </template>
      </el-table-column>
      <el-table-column align="center" label="满减金额" prop="discount">
        <template v-slot="scope">
          减免{{ scope.row.discount }}元
        </template>
      </el-table-column>
      <el-table-column align="center" label="每人限领" prop="limit" />
      <el-table-column align="center" label="商品使用范围" prop="">
        全场通用
      </el-table-column>
      <el-table-column align="center" label="优惠券类型" prop="type">
        <template v-slot="scope">
          <span v-if="scope.row.type == 0">通用领券</span>
          <span v-if="scope.row.type == 1">注册赠券</span>
          <span v-if="scope.row.type == 2">兑换码</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="优惠券数量" prop="total">
        <template v-slot="scope">
          <span v-if="scope.row.total == 0">不限</span>
          <span v-else>{{scope.row.total}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" prop="status">
        <template v-slot="scope">
          <span v-if="scope.row.status == 0">正常</span>
          <span v-if="scope.row.status == 1">已过期</span>
          <span v-if="scope.row.status == 2">已下架</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" prop="address" width="300">
        <template v-slot="scope">
          <el-button type="primary" style="width: 60px;" @click="details(scope.row.id)">详情</el-button><el-button type="info" style="width: 60px;" @click="edit(scope.row)">编辑</el-button><el-button type="danger" style="width: 60px;" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination_box">
      <pagination :total="total" :page="query.page" @size="setSize" @current="setCurrent" />
    </div>
    <div class="dialog">
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form v-model="form" :rules="rules" ref="form">
          <el-form-item label="优惠券名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="介绍" :label-width="formLabelWidth">
            <el-input v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item label="标签" :label-width="formLabelWidth">
            <el-input v-model="form.tag"></el-input>
          </el-form-item>
          <el-form-item label="最低消费" :label-width="formLabelWidth">
            <el-input v-model="form.min">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="满减金额" :label-width="formLabelWidth">
            <el-input v-model="form.discount">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="每人限领" :label-width="formLabelWidth">
            <el-input v-model="form.limit">
              <template slot="append">张</template>
            </el-input>
          </el-form-item>
          <el-form-item label="分发类型" :label-width="formLabelWidth">
            <el-select v-model="form.type">
              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="优惠券数量" :label-width="formLabelWidth">
            <el-input v-model="form.total">
              <template slot="append">张</template>
            </el-input>
          </el-form-item>
          <el-form-item label="有效期" :label-width="formLabelWidth">
            <el-radio-group v-model="form.effectiveRadio">
              <el-radio-button label="领券相对天数"></el-radio-button>
              <el-radio-button label="指定绝对时间"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" v-if="form.effectiveRadio == '领券相对天数'">
            <el-input v-model="form.days">
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" v-if="form.effectiveRadio == '指定绝对时间'">
            <el-row>
              <el-col :span="11">
                <el-date-picker v-model="form.addTime" type="datetime" placeholder="选择日期" style="width: 100%;" />
              </el-col>
              <el-col :span="2">
                至
              </el-col>
              <el-col :span="11">
                <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择日期" style="width: 100%;" />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="商品限制范围" :label-width="formLabelWidth">
            <el-radio-group v-model="form.rangeRadio">
              <el-radio-button label="全场通用"></el-radio-button>
              <el-radio-button label="指定分类"></el-radio-button>
              <el-radio-button label="指定商品"></el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetForm('form')">取消</el-button><el-button type="primary"@click="sure('form')">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { listCoupon, deleteCoupon, createCoupon, updateCoupon } from '@/api/coupon'
  import pagination from '@/views/pagination.vue'

  export default {
    components: {
      pagination
    },
    data() {
      return {
        name: '',
        type: '',
        status: '',
        typeOptions: [{
          value: 0,
          label: '通用领券'
        }, {
          value: 1,
          label: '注册赠券'
        }, {
          value: 2,
          label: '兑换码'
        }],
        stateOptions: [{
          value: 0,
          label: '正常'
        }, {
          value: 1,
          label: '已过期'
        }, {
          value: 2,
          label: '已下架'
        }],
        tableData: [],
        query: {
          page: 1,
          limit: 20
          // sort: add_time,
          // order: desc
        },  
        total: null,
        title: '',
        dialogFormVisible: false,
        form: {
          name: '',
          desc: '',
          tag: '',
          min: 0,
          discount: 0,
          limit: 1,
          type: 0,
          total: 0,
          effectiveRadio: "领券相对天数",
          days: '',
          rangeRadio: "全场通用",
          addTime: '',
          endTime: ''
        },
        formLabelWidth: '100px',
        rules: {
          name: [
            { required: true, message: '优惠券标题不能为空', trigger: 'blur' }
          ],
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        listCoupon(this.query).then(res => {
          if (res.data.errno == 0) {
            this.tableData = res.data.data.list
            this.total = res.data.data.total
          }
        })
      },
      // 分页
      setSize(val) {
        this.query.page = 1
        this.query.limit = val
        this.getList()
      },
      setCurrent(val) {
        this.query.page = val
        this.getList()
      },
      // 查找
      find() {
        this.query = {
          page: 1,
          limit: 20,
          name: this.name,
          type: this.type,
          status: this.status
        }
        this.getList()
      },
      // 删除
      del(row) {
        deleteCoupon(row)
        this.$notify({
          title: '成功',
          message: '删除优惠券成功',
          type: 'success'
        });
        this.getList()
      },
      // 详情
      details(id) {
        this.$router.push({
            path: '/promotion/couponDetail',
            query: {
              id
            }
        })
      },
      // 添加
      add() {
        this.dialogFormVisible = true
        this.title = '创建'
        this.form = {
          name: '',
          desc: '',
          tag: '',
          min: 0,
          discount: 0,
          limit: 1,
          type: 0,
          total: 0,
          effectiveRadio: "领券相对天数",
          days: '',
          rangeRadio: "全场通用",
          addTime: '',
          endTime: ''
        }
      },
      // 编辑
      edit(row) {
        console.log(row);
        this.dialogFormVisible = true;
        this.title = "编辑";
        this.form = {
          name: row.name,
          desc: row.desc,
          tag: row.tag,
          min: row.min,
          discount: row.discount,
          limit: row.limit,
          type: row.type,
          total: row.total,
          effectiveRadio: '领券相对天数',
          days: row.days,
          rangeRadio: '全场通用',
          addTime: row.addTime,
          endTime: row.endTime,
          id: row.id
        }
      },
      // 确定
      sure(formName) {
        if (this.title == '创建') {
          createCoupon(this.form).then(res => {
            if (res.data.errno == 0) {
              this.$notify({
                title: '成功',
                message: '创建优惠券成功',
                type: 'success'
              });
              this.dialogFormVisible = false
              this.getList()
            }
          }).catch(err => {
            return false;
          })
        } else if (this.title == '编辑') {
          updateCoupon(this.form).then(res => {
            if (res.data.errno == 0) {
              this.$notify({
                title: '成功',
                message: '更新优惠券成功',
                type: 'success'
              });
              this.dialogFormVisible = false
              this.getList()
            }
          })
        } else {
          return false;
        }
      },
      // 取消
      resetForm(formName) {
        this.dialogFormVisible = false
      },
      // 导出
      exportInformation() {
        // 创建一个blob对象, 用于存储execl文件的数据
        var blob = new Blob([this.tableData])
        // 创建一个a标签
        const link = document.createElement('a')
        // URL.createObjectURL创建一个下载链接, 并将其设置为a的href
        link.href = window.URL.createObjectURL(blob)
        link.target = '_blank'
        // 设置文件名
        const nowTime = new Date()
        link.setAttribute('download', `优惠券信息.xlsx`)
        // 将a标签添加到页面的body上
        document.body.appendChild(link)
        // 触发点击事件
        link.click()
        // 移除a标签
        document.body.removeChild(link)
      }
    }
  }
</script>

<style>
  .box {
    padding: 20px;
  }
  .el-form {
    padding-bottom: 10px;
  }
  .form_box {
    margin-bottom: 10px;
  }
  .pagination_box {
    padding: 32px 16px;
    margin-top: 30px;
  }
  .dialog .el-form {
    width: 400px;
    margin-left: 50px;
    padding: 0;
  }
  .dialog .el-form .el-form-item__label {
    text-align: left;
  }
</style>